<%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/12/18
  Time: 15:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">
    body{
        margin:0;
        padding:0;
        font-size:12px;
        line-height:20px;
    }
    .box{

    }
    .main{
        background-image: url("./images/55.jpg");
        width:800px;
        height: 500px;
        margin-left:auto;
        margin-right:auto;
    }
    .left{
        color:black;
        text-align:right;
        width:80px;
        height:25px;
        padding-right:5px;
    }

    .center{
        width:135px;
    }
    .hr_1 {
        font-size: 14px;
        font-weight: bold;
        color: blue;
        height: 135px;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #3275c3;
        vertical-align:bottom;
        padding-left:12px;
    }
    .in{
        width:130px;
        height:16px;
        border:solid 1px #79abea;
    }

    .red{
        color:#cc0000;
        font-weight:bold;
    }
    #id{
        position: absolute;
        bottom: 400px;
        right: 680px;
    }
    #bt{
        width:80px;
        height:25px;
        background:#3388ff;
        border:1px solid #fff;
        color:#fff;
        font-size:2px;
    }

    div{
        color:#F00;
    }
</style>
<script type="text/javascript">
    var bt=document.getElementById("bt");
    var bt2=document.getElementById("bt2");
    function $(elementId){
        return document.getElementById(elementId).value;
    }
    function divId(elementId){
        return document.getElementById(elementId);
    }
    /*用户名验证*/
    function checkUser(){
        var user=$("user");
        var userId=divId("user_prompt");
        userId.innerHTML="";
        var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        if(reg.test(user)==false){
            userId.innerHTML="用户名不正确,必须由英文字母和数字组成的4-16位字符，以字母开头";
            return false;
        }
        userfalg=true;
        return true;
    }
    /*密码验证*/
    function checkPwd(){
        var pwd=$("pwd");
        var pwdId=divId("pwd_prompt");
        pwdId.innerHTML="";
        var reg=/^[a-zA-Z0-9]{4,10}$/;

        if(reg.test(pwd)==false){
            pwdId.innerHTML="密码须由英文字母或数字组成，长度在4-10之间";
            return false;
        }
        pwdfalg=true;
        return true;
    }

    function checkRepwd(){
        var repwd=$("repwd");
        var pwd=$("pwd");
        var repwdId=divId("repwd_prompt");
        repwdId.innerHTML="";

        if(pwd!=repwd){
            repwdId.innerHTML="两次输入的密码不一致";
            return false;
        }

        return true;
    }

    /*验证邮箱*/
    function checkEmail(){
        var email=$("email");
        var email_prompt=divId("email_prompt");
        email_prompt.innerHTML="";
        var reg=/^\w+@\w+\.[a-zA-Z]{2,4}$/;

        if(reg.test(email)==false){
            email_prompt.innerHTML="Email格式不正确，例如web@sohu.com";
            return false;
        }

        return true;
    }
    /*验证手机号码*/
    function checkMobile(){
        var mobile=$("mobile");
        var mobileId=divId("mobile_prompt");
        var regMobile=/^1\d{10}$/;

        if(regMobile.test(mobile)==false){
            mobileId.innerHTML="手机号码不正确，请重新输入";
            return false;
        }
        mobileId.innerHTML="";
        return true;
    }
    /*验证身份证*/
    function checkID() {
        var birth = $("birth");
        var birthId = divId("birth_prompt");
        var reg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;

        if (reg.test(birth) == false) {
            birthId.innerHTML = "不满足条件";
            return false;
        }
        birthId.innerHTML = "";
        return true;

    }
    function bttt() {
        var Form=document.getElementById("mufromm");
        var bool=true;
        if(!checkEmail()){bool=false;}
        if(!checkID()){bool=false;}
        if(!checkMobile()){bool=false;}
        if(!checkPwd()){bool=false;}
        if(!checkRepwd()){bool=false;}
        if(!checkUser()){bool=false;}
        if(bool==true){
            Form.action="zhuce1";
            Form.submit();
    }
    // function btt(){
    //     var Form=document.getElementById("mufromm");
    //     var bool=true;
    //     if(!checkEmail()){bool=false;}
    //     if(!checkID()){bool=false;}
    //     if(!checkMobile()){bool=false;}
    //     if(!checkPwd()){bool=false;}
    //     if(!checkRepwd()){bool=false;}
    //     if(!checkUser()){bool=false;}
        // if(bool==true){
        //     From.submit();
        // }
        // if(bool==true){
        //     alert("cg");
        //     return true;
        //
        // }else {
        //     alert("cf");
        //     false;
        // }

    }
    // bt2.onclick= function(){
    //     if(idfalg==true&&mobilefalg==true&&emailfalg==true&&repwdfalg==true&&pwdfalg==true&&userfalg==true){
    //     bt.style.display="block";
    //     }

</script>
</head>

<body>
<div class="box">
    <table  id="main" class="main" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td class="hr_1">新用户注册</td>
        </tr>
        <tr>
            <td style="height:10px;"></td>
        </tr>
        <form  method="post" name="myform" id="mufromm" >
<%--         action="zhuce1"   onsubmit="return btt()"--%>
            <tr>
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td class="left">用户名：</td>
                            <td class="center">
                                <input id="user" name="name" type="text" class="in" onblur="checkUser()" placeholder="长度4~12，英文大小写字母" />
                            </td>
                            <td>
                                <div id="user_prompt"></div>
                            </td>
                        </tr>
                        <tr>
                            <td class="left">密码：</td>
                            <td class="center"><input id="pwd" name="password" type="password" class="in"  onblur="checkPwd()" placeholder="长度6~20，大小写字母、数字或下划线"/></td>
                            <td><div id="pwd_prompt"></div></td>
                        </tr>
                        <tr>
                            <td class="left">确认密码：</td>
                            <td class="center"><input id="repwd" type="password" class="in"  onblur="checkRepwd()" placeholder="请再次输入密码进行确认" /></td>
                            <td><div id="repwd_prompt"></div></td>
                        </tr>
                        <tr>
                            <td class="left">电子邮箱：</td>
                            <td class="center"><input id="email" name="email" type="text" class="in"  placeholder="用户名@域名（域名后缀至少2个字符）" onblur="checkEmail()"/></td>
                            <td><div id="email_prompt"></div></td>
                        </tr>
                        <tr>
                            <td class="left">手机号码：</td>
                            <td class="center"><input id="mobile" name="phonenumber" type="text" class="in" placeholder="13、14、15、17、18开头的11位手机号" onblur="checkMobile()" /></td>
                            <td><div id="mobile_prompt"></div></td>
                        </tr>
                        <tr>
                            <td class="left">身份证号:</td>
                            <td class="center"><input id="birth" name="idcard" type="text" class="in" placeholder="长度为18位" onblur="checkID()"/></td>
                            <td><div id="birth_prompt"></div></td>
                        </tr>
                        <tr>
                            <td class="left">&nbsp;</td>
                            <td class="center"><input type="button" value="注册成功" id="bt" onclick="bttt()"></td>
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </form>

    </table>
</div>
</body>
</html>